	@charset "utf-8"
/*global*/
	body{width: 100%;height: 100%;font-family: 'Vaud Display', Helvetica, sans-serif;}
	.left{float: left;}
	.right{float: right;}
	.clear{clear: both}
/*section*/
	#wrap{position: relative;left: 0;overflow: hidden;font:bold 20px Lato,"Microsoft YaHei",sans-serif;;}
	#wrap>div{position: relative;overflow: hidden}
/*p1*/
	#p1{background: #00a8e7}
	#bg1{width: 100%;height: 100%; background: url(../img/bg1.jpg) 50% 50% no-repeat ;background-size: cover;box-shadow: 0 0 5px 5px #888888;  -webkit-transition: all .2s ease;
                     -moz-transition:all .2s ease;-ms-transition: all .2s ease;-o-transition:all .2s ease;transition: all .2s ease}
	#bg1 div:first-of-type{width: 80%;margin: auto;position: absolute;top:0;bottom:0;left:0;right:0;height: 79%;-webkit-animation: move1 1s  linear both ;animation: move1 1s  linear both;z-index: 10;}
	#bg1 div:last-of-type{width: 60%;color: #fff;font-size:60px;margin:100px auto;position: absolute;top:0;bottom:0;left:0;right:0;z-index:9;}
	#bg1 p:last-of-type{text-align: right;}
	#p1 img{display: block;position: absolute;margin: 500px auto;top:0;bottom:0;left:0;right:0;z-index: 10;}
	.move2{-webkit-animation: move2 .6s 1.2s linear both;animation: move2 .6s 1.2s linear both}
	.move3{-webkit-animation: move3 1.5s  infinite linear both;animation: move3 1.5s  infinite linear both}
	.move4{position: absolute;top: 20px;left: 20px;width: 300px;height: 40px;-webkit-animation: move4 3s infinite normal ;animation: move4 3s infinite normal; -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;     -ms-transform-style: preserve-3d;      -o-transform-style: preserve-3d;         transform-style: preserve-3d;-webkit-transform: translateZ(-20px);-moz-transform: translateZ(-20px);-ms-transform: translateZ(-20px);-o-transform: translateZ(-20px);transform: translateZ(-20px)}
	.move4 p{position: absolute;left:0;width: 280px;height: 20px;padding: 10px;background: #03734b;line-height: 20px;color: #fff;text-align:center;}
	.move4 p:first-of-type{top:0px;box-shadow: 0 0 3px #888888;-webkit-transform: translateZ(20px);-moz-transform: translateZ(20px);-ms-transform: translateZ(20px);
           -o-transform: translateZ(20px);transform: translateZ(20px);-webkit-transition: all 3s;-moz-transition: all 3s;-ms-transition: all 3s;
           -o-transition: all 3s;transition: all 3s;}
    	 .move4 p:last-of-type{top:0px;box-shadow: 0 0 3px #888888;-webkit-transform: rotateX(-90deg) translateZ(20px);-moz-transform: rotateX(-90deg) translateZ(20px);-ms-transform: rotateX(-90deg) translateZ(20px);
           -o-transform: rotateX(-90deg) translateZ(20px);transform: rotateX(-90deg) translateZ(20px);-webkit-transition: all 3s;-moz-transition: all 3s;-ms-transition: all 3s;
           -o-transition: all 3s;transition: all 3s;}
            @keyframes move1{0%{border: 120px solid white;transform: scale(.6);}100%{border: 10px solid white;transform: scale(1);}}
	@keyframes move2{0%{opacity:0;}100%{opacity:1;}}
	@keyframes move3{0%{margin-top:500px;}80%{margin-top:550px;}100%{margin-top:500px;}}
	@keyframes move4{0%{-webkit-transform:rotateX(95deg);-moz-transform: rotateX(0); -ms-transform: rotateX(0);  -o-transform: rotateX(0);     transform: rotateX(0);;}50%{-webkit-transform:rotateX(95deg);-moz-transform:rotateX(95deg); -ms-transform:rotateX(95deg);  -o-transform:rotateX(95deg);     transform:rotateX(95deg);}100%{-webkit-transform:rotateX(95deg);-moz-transform:rotateX(0); -ms-transform:rotateX(0);  -o-transform:rotateX(0);     transform:rotateX(0);}}
	
/*p2*/
	#p2{background: linear-gradient(to bottom, #1e242a 30%, #293039 60%);}
	#p2>span{display: block;position: absolute;top:30px;left: 30px;color: #fff;font-size: 30px;}
	#p2 img:last-of-type{display: block;position: absolute;bottom:-300px;width: 100%;z-index: 10;-webkit-transition:all 2s ease-out;-moz-transition:all 2s ease-out;-ms-transition:all 2s ease-out ;-o-transition:all 2s ease-out;transition:all 2s ease-out;  }
	#star{position: absolute;top: 100px;left: 0;width: 100%;height: 100%;z-index: 9;-webkit-transition:all 2s ease-out;-moz-transition:all 2s ease-out;-ms-transition:all 2s ease-out ;-o-transition:all 2s ease-out;transition:all 2s ease-out; }
   	#me{position: absolute;top: 30px;left: 0;width: 100%;height: 50%;z-index: 11}
   	#me div{position: absolute;width: 280px;height: 320px;border:15px solid rgba(255,255,255,1);overflow: hidden;background-size:cover }
   	#me div:nth-child(1){background: url(../img/me3.jpg) 50% 50% no-repeat;top: -500px;left: 200px;transform-origin:0% 100%;transform: rotateZ(30deg);z-index:16;}
	#me div:nth-child(2){background: url(../img/me2.jpg) 50% 50% no-repeat;top: -700px;left: 200px;z-index:15;}
	#me div:nth-child(3){background: url(../img/me4.jpg) 50% 50% no-repeat;top: -700px;left: 200px;z-index:14;}
	#me div:before{content: '';position: absolute;top:-40px;left: -30px;width: 150%;height: 60%;background: rgba(255,255,255,.05);border-radius:0 0 10px 10px;transform: rotateZ(-10deg);}
	#me0{position: absolute;top: 15%;right:15%;z-index: 16}
	#me0 h2{font-size:30px;color: #fff;text-align:center;letter-spacing: 4px;width: 100%;margin: 10px 0}
	#me0 h3{font-size:25px;font-weight: normal;color: #eaeaea;text-align: center;width: 100%;margin: 10px 0}
	#me0 h2:nth-child(1){font-size:60px;text-shadow: 1px 0 #1e242a,2px  0 #fff;letter-spacing: 8px}
	.hover0{transition: all .5s ease}
	.move6{animation: move6 2s infinite linear both;-webkit-animation: move6 2s  infinite linear both;}
	.move7{animation: move7 2s  linear both;}
	.move8{animation: move8 2s  linear both;}
	.move9{animation: move9 2s 0.5s linear both;}
	.move10{animation: move10 4s infinite linear both;-webkit-animation: move10 4s  infinite linear both;}
	@keyframes move6{0%{box-shadow: 0 0 0px #fff}50%{box-shadow: 0 0 10px 2px #fff}100%{box-shadow: 0 0 0px #fff}}                   
	@keyframes move7{0%{top: -500px;left: 200px;transform-origin:0% 100%;transform: rotateZ(30deg);}
				10%{top: -500px;left: 200px;transform-origin:0% 100%;transform: rotateZ(30deg); }
				60%{top: 100px;left: 200px;transform-origin:0% 100%;transform: rotateZ(5deg);}
				70%{top: 100px;left: 200px;transform-origin:100% 100%;transform: rotateZ(-4deg);}
				80%{top: 100px;left: 200px;transform-origin:0% 100%;transform: rotateZ(3deg);}
				90%{top: 100px;left: 200px;transform-origin:100% 100%;transform: rotateZ(-2deg);}
				95%{top: 100px;left: 200px;transform-origin:0% 100%;transform: rotateZ(1deg);}
				100%{top: 100px;left: 200px;transform-origin:0% 0%;transform: rotateZ(0)}}
	@keyframes move8{0%{top: -700px;left: 200px;transform-origin:0% 0%;transform: rotateZ(90deg);}
				100%{top: 110px;left: 100px;transform-origin:0% 0%;transform: rotateZ(-15deg)}}
	@keyframes move9{0%{top: -700px;left: 200px;transform-origin:0% 0%;transform: rotateZ(-90deg);}
				100%{top: 65px;left: 300px;transform-origin:0% 0%;transform: rotateZ(10deg)}}
	@keyframes move10{0%{box-shadow: 0 0 0px #fff}50%{box-shadow: 0 0 4px 2px #fff}100%{box-shadow: 0 0 0px #fff}} 
/*p3*/
	#p3{background: #22c3aa}
	#p3>span{display: block;position: absolute;top:30px;left: 30px;color: #eaeaea;font-size: 30px;}
	#p3>ul{width: 40%;margin: 10% auto;}
	#p3>ul li{margin: 10px 0}
	#p3>ul li:nth-child(2n+1){color: #008a75}
	#p3>ul li:nth-child(2n){color: #aee2d9}
	#open{position: relative;width: 300px;height: 40px;margin: 50px auto;background: #fff;overflow: hidden;cursor: pointer;}
	#open div{display: none;position: absolute;width: 0;height: 0;border-radius:100%;animation: move11 2s  infinite linear both; }
	#open span{display: block;width: 100%;height: 30px;margin: 8px 0 12px 0;line-height:100%;text-align: center;color: #008a75 }
	#open:hover div{display: block;}
	#close{display:none;position:absolute;width: 200px;height: 30px;bottom: 5%;right: 5%;background: transparent;overflow: hidden;cursor: pointer;z-index: 21}
	#close div{display: block;position: absolute;width: 0;height: 0;border-radius:100%;animation: move12 2s  infinite linear both; }
	#close span{display: block;width: 100%;height: 30px;line-height:100%;text-align: center;color: #008a75 }
	#p3 iframe{position:absolute;top: 5%;left: 5%;width: 90%;height: 90%;box-shadow: 0 0  20px  #fff;z-index: 20;transform-origin: -10% 50%;transform: perspective(10000px) rotateY(-90deg);transition:all 2s ease }
	@keyframes move11{0%{border: 0 solid rgba(0,255,0,.5);top: 0;left: 150px}100%{border: 150px solid rgba(0,255,0,0);top: -150px;left: 0px}} 
	@keyframes move12{0%{border: 100px solid rgba(0,255,0,0);top: -100px;left: 0px}100%{border: 0 solid rgba(0,255,0,.5);top: 0;left: 100px}} 
/*p4*/
	#p4{width: 100%;height: 200px;background: #000}
	#p4 .tree0{position: relative;overflow: hidden;width: 40px;height: 120px}
	#p4 .tree1{position: relative;overflow: hidden;width: 60px;height: 160px}
	#p4 .house{position: relative;overflow: hidden;}
	#p4 .tree0  div:nth-child(1){width: 0;height: 0;border-bottom: 50px solid #5fb36b;border-right:10px solid #5fb36b;border-top: 50px solid transparent;border-left:10px solid transparent;}
	#p4 .tree0  div:nth-child(2){width: 0;height: 0;border-bottom: 50px solid #6fca7a;border-right:10px solid transparent;border-top: 50px solid transparent;border-left:10px solid #6fca7a;}
	#p4 .tree0  div:nth-child(3){width: 10px;height: 20px;background:#8B5A2B;position: absolute;top: 100px;left:15px}
	#p4 .tree1  div:nth-child(1){width: 0;height: 0;border-bottom: 60px solid #5fb36b;border-right:15px solid #5fb36b;border-top: 60px solid transparent;border-left:15px solid transparent;}
	#p4 .tree1  div:nth-child(2){width: 0;height: 0;border-bottom: 60px solid #6fca7a;border-right:15px solid transparent;border-top: 60px solid transparent;border-left:15px solid #6fca7a;}
	#p4 .tree1  div:nth-child(3){width: 10px;height: 40px;background:#8B5A2B;position: absolute;top: 120px;left:25px}
	#p4 .house  div:nth-child(1){width: 0;height: 0;border-bottom: 30px solid #8B5A2B;border-right:100px solid transparent;border-left:100px solid transparent;border-top: 30px solid transparent}
	#p4 .house  div:nth-child(2){}
	#p4 .house  div:nth-child(3){}
	#p4 .house  div:nth-child(4){}





/*footer*/
/*-webkit-animation: move4 3s infinite normal ;animation: move4 3s infinite normal */
/*-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-ms-transition:all 2s ease ;-o-transition:all 2s ease;transition:all 2s ease;  */
/*-webkit-transform:;-moz-transform:;-ms-transform:;-o-transform:;transform:*/
/*-webkit-transform-origin:;-moz-transform-origin:;-ms-transform-origin: ;-o-transform-origin:;transform-origin:*/